/*
 * @FilePath: main.js
 * @Author: 杜芬
 * @Date: 2024-04-22 17:18:41
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-04-23 11:00:32
 * Copyright: 2024 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 页面
 */
/*
 * @FilePath: main.js
 * @Author: 杜芬
 * @Date: 2024-04-22 17:18:41
 * @LastEditors: 
 * @LastEditTime: 2024-04-23 10:01:13
 * Copyright: 2024 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 页面
 */
import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
let scene, camera, renderer, controls

function init() {
  scene = new THREE.Scene()
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
  camera.position.set(0, 0, 5)
  renderer = new THREE.WebGLRenderer({ antialias: true })
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)

  controls = new OrbitControls(camera, renderer.domElement)
  controls.enableDamping = true

  const axesHelper = new THREE.AxesHelper(5)
  scene.add(axesHelper)
};
function renderLoop() {
  renderer.render(scene, camera)
  controls.update()
  requestAnimationFrame(renderLoop)
}

 
// 正方形
function createBasic() {
  // 目标：了解着色器语法
  // 作用：可以绘制更高级的图形和颜色效果
  // 使用：GLSL （OpenGL Shader Language）语法，类 C 语法
  // 注意：结尾必须分号，数值默认浮点型，内置变量，函数和类型修饰
  // 例子：渲染一个绿色平面正方形
  // 步骤：
  // 1. 定义着色器材质 ShaderMaterial
  // 2. 设置顶点着色器和片元着色器代码
  const geometry = new THREE.PlaneGeometry(1, 1);
  geometry.setAttribute('position2', geometry.attributes.position);
  const material = new THREE.ShaderMaterial({
    // 顶点着色器（这套着色器代码会对每个像素点执行一次）
    // gl_Position 内置变量，用于接收并设置物体的顶点坐标，值要求是 vec4 类型
    // vec4() 内置函数，定义 4 维空间坐标点对象 （xyzw），如果 w 值为 1.0，x-z的值，x/w，y/w，z/w（w是一个数值比例），值需要接收 4 数字
    // position：几何图形对象 geometry 的 position 属性值（x,y,z数值），ShaderMaterial 材质内部默认声明和赋值的一个变量

    // 问题：只使用 vec4(position, 1.0) 设置顶点坐标出问题（世界坐标->设备坐标->屏幕坐标）显示太大
    // 解决：转换过程中需要一些矩阵算法的参与
    // 模型矩阵：用在位移，旋转，缩放时，本地坐标 -> 世界坐标 modelMatrix (内置变量)
    // 视图矩阵：世界坐标 -> 设备坐标 viewMatrix
    // 投影矩阵：设备坐标 -> 屏幕坐标 projectionMatrix
    // 注意：projectionMatrix 一定要在前面
    // 深入：图形学+数学 gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
    // gl_FragColor = vec4(0, 1.0, 0, 1.0);
    vertexShader: `
    attribute vec3 position2;
      void main() {
        gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position2, 1.0);
      }
    `,
    // 片元着色器
    // gl_FragColor 内置变量，用于接收像素点颜色数值，值要求是 vec4 类型
    fragmentShader: `
      void main() {
        gl_FragColor = vec4(0, 1.0, 0, 1.0);
      }
    `
  });
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
}


init()
createBasic()
renderLoop() 
 

